<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>星级评分</title>
		<style type="text/css">
			*{margin: 0; padding: 0;}
			li{list-style: none;}
			#list{width: 800px; margin: 100px auto;}
			#box{width: 800px; margin: 300px auto;}
			.star{width: 35px; margin: 0 10px; font-size: 30px; float: left; height: 35px; background: url(img/star.png) no-repeat; cursor: pointer;}
		</style>
		<script type="text/javascript">
			window.onload=function()
			{
				var olen=document.getElementById('len');
				var orat=document.getElementById('rate');
				var onow=document.getElementById('now');
				var obtn=document.getElementById('btn');
				var olist=document.getElementById('list');
				var ogetlen=document.getElementById('getlen');
				var ohalf=document.getElementById('half');
				var timer=null;
				method();
				timer=setInterval(method,300);
					olist.onmouseover=function()
					{
						clearInterval(timer);
					}
					olist.onmouseout=function()
					{	
						timer=setInterval(method,300);
					}
				function method()
				{
					var t1=new rating();
					olist.innerHTML='';
					t1.init('list',{
						num:olen.value,			//星星的个数
						rate:orat.value,		//内容
						iNow:onow.value,		//现在的点亮的个数
						isHalf:ohalf.checked			//是否评论半个
					});
					t1.getlen(ogetlen);	//鼠标划过的个数
					t1.now(onow); //现在选中的个数
				}
			}
			function rating()
			{
				this.obj=null;
				this.adiv=null;
				this.half=false;
				this.settings={
					num:6,
					iNow:1,
					rate:'',
					color:'red',
					isHalf:false
				};
				this.index=0;
			}
			rating.prototype.getlen=function(obj)
			{
				var This=this;
				if(this.settings.isHalf) //是否允许半个
				{
					bindEvent(this.obj,'mousemove',function(ev){
						var ev=ev||event;
						var target=ev.target;
						if(This.half)
						{
							obj.value=target.index+0.5;
						}else
						{
							obj.value=target.index+1;
						}
					});	
				}else
				{
					bindEvent(this.obj,'mouseover',function(ev){
						var ev=ev||event;
						var target=ev.target;
						obj.value=target.index+1;
					});	
				}
				bindEvent(this.obj,'mouseout',function(){
					var ev=ev||event;
					var target=ev.target;
					obj.value=This.index;
				});
			}
			rating.prototype.now=function(obj)
			{
				var This=this;
				bindEvent(this.obj,'click',function(ev){
					var ev=ev||event;
					var target=ev.target;
					if(This.half)
					{
						obj.value=target.index+0.5;
					}else
					{
						obj.value=target.index+1;
					}
				});
			}
			rating.prototype.init=function(id,opt)
			{
				extend(this.settings,opt);
				this.index=this.settings.iNow;
				this.obj=document.getElementById(id);
				this.creat();
				this.adiv=this.obj.getElementsByTagName('div');
				var This=this;
				star(this.settings.iNow); //初始化个数
				if(this.settings.isHalf)	//是否允许评论半个
				{
					this.obj.onmousemove=function(ev)
					{
						var ev=ev||event;
						var target=ev.target;
						if(ev.pageX-target.offsetLeft<target.offsetWidth/2)
						{
							This.half=true;
							star(target.index+0.5);
						}else
						{
							This.half=false;
							star(target.index+1);
						}
					}
					bindEvent(this.obj,'click',function(ev){
						var ev=ev||event;
						var target=ev.target;
						if(This.half)
						{
							This.index=target.index+0.5;
						}else
						{
							This.index=target.index+1;
						}
					});
				
				}else
				{
					this.obj.onmousemove=null;
					bindEvent(this.obj,'mouseover',function(ev){
						var ev=ev||event;
						var target=ev.target;
						star(target.index+1);
					});
					bindEvent(this.obj,'click',function(ev){
						var ev=ev||event;
						var target=ev.target;
						This.index=target.index+1;
					});
				}
				bindEvent(this.obj,'mouseout',function(ev){
					star(This.index);
				});
				function star(num)
				{
					for(var i=0;i<This.adiv.length;i++)
					{
						if(num>i)
						{
							if(This.settings.rate=='')
							{
								This.adiv[i].style.backgroundPosition='0 -40px';
							}else
							{
								This.adiv[i].style.background='0';
								This.adiv[i].style.color=This.settings.color;
							}
						}else
						{
							if(This.settings.rate=='')
							{
								This.adiv[i].style.backgroundPosition='0 0';
							}else
							{
								This.adiv[i].style.background='0';
								This.adiv[i].style.color='#ccc';
							}
						}
					}
					if(num>This.adiv.length)
					{
						num=This.adiv.length;
					}
					if(This.settings.isHalf && num!=parseInt(num) && num!='')
					{
						num=parseInt(num);
						This.adiv[num].style.backgroundPosition='0 -80px';
					}
				}	
			}
			rating.prototype.creat=function()
			{
				for(var i=0;i<this.settings.num;i++)
				{
					var div=document.createElement('div');
					div.className="star";
					div.innerHTML=this.settings.rate;
					div.index=i;
					this.obj.appendChild(div);
				}
			}
			function extend(obj1,obj2)
			{
				for(var attr in obj2)
				{
					obj1[attr]=obj2[attr];
				}
			}
			function bindEvent(obj,events,fn)  //绑定事件
			{
				//obj 		楼层
				//events	书架
				//fn		一本书
				obj.listeners=obj.listeners||{};
				obj.listeners[events]=obj.listeners[events]||[];
				obj.listeners[events].push(fn);
				if(obj.addEventListener)
				{
					obj.addEventListener(events,fn,false);
				}else
				{
					obj.attachEvent('on'+events,fn);
				}
			}
			function fireEvent(obj,events) //主动触发自定义事件
			{
				for(var i=0;i<obj.listeners[events].length;i++)
				{
					obj.listeners[events][i]();
				}
			}
		</script>
	</head>
	<body>
		个数:<input type="number" id="len" value="10" /><br />
		图形:<input type="text" name="tate" id="rate" value="" /><br />
		当前: <input type="number" id="now"value="2" /><br />
		是否允许半个: <input type="checkbox" id="half" /><br />
		现在是第几个:<input type="text" name="getlen" id="getlen" readonly="true" />
		<div id="list">
			
		</div>
		<div id="box">
			
		</div>
	</body>
</html>
